<template>
	<template v-if="prop.comp == 'search_icon'">
		<div class="common_search" id="search_icon" @click="reProp.AtClick"  @mousedown="MouseDownHandle"><search_icon></search_icon></div>
	</template>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import { SetStaticCssTxt } from '../globalJS.js';
import search_icon from '../assets/SearchIcon.vue';

let prop = defineProps(['comp', 'width', 'height','AtClick']);

let reProp = reactive({ width: prop.width || '30px', height: prop.height || '30px' ,AtClick:prop.AtClick});
let dragTerget = reactive({ comp: prop.comp, range: 100, opacity: 0.2 });

SetStaticCssTxt('avan', `.common_search{width: ${reProp.width};height: ${reProp.height};}`);

onMounted(() => {
	let dragEle = document.getElementById(prop.comp);
	// console.log(dragTerget.element);
	dragTerget.dragEle = dragEle;
	// console.log(dragEle.parentNode);
});

function MouseDownHandle(event) {
	//记录 最初 鼠标 按下 的 位置
	dragTerget.mouseX = event.pageX;
	dragTerget.mouseY = event.pageY;
	console.log('鼠标 按下 的 位置 x:', dragTerget.mouseX, ' y:', dragTerget.mouseY);

	// 记录 鼠标 在元素内 的 位置
	dragTerget.offsetX = event.offsetX;
	dragTerget.offsetY = event.offsetY;
	// console.log('鼠标 在元素内 的 位置 x:', dragTerget.offsetX, ' y:', dragTerget.offsetY);

	console.log('元素 在文檔流中 的 位置 x:', dragTerget.dragEle.offsetLeft, ' y:', dragTerget.dragEle.offsetLeft);

	//克隆元素
	function CloneDragEle() {
		//haveCloned==false  克隆 元素
		if (!dragTerget.haveCloned) {
			//获取 clone 元素
			let cloneElement = dragTerget.dragEle.cloneNode(true);
			cloneElement.setAttribute('id', `${dragTerget.comp}_cl`);
			cloneElement.setAttribute('class', `common_search`);

			// cloneElement.setAttribute('style', `left: ${event.pageX - event.offsetX}px;top: ${event.pageY - event.offsetY}px;`);
			cloneElement.setAttribute('style', `left: ${dragTerget.dragEle.offsetLeft}px;top: ${dragTerget.dragEle.offsetTop}px;`);

			document.body.appendChild(cloneElement);
			dragTerget.cloneEle = document.getElementById(`${dragTerget.comp}_cl`);
			dragTerget.haveCloned = true;
		} else {
			//haveCloned==true  已经 被克隆了
			console.log('元素已经被克隆了');
		}
	}

	//删除 克隆元素
	function DropCloneDragEle() {
		console.log('删除了 我');
		dragTerget.cloneEle.parentNode.removeChild(dragTerget.cloneEle);
		dragTerget.haveCloned = false;
	}

	//修改 clone 元素的 位置 和 透明值
	function setElePosition(x, y, opacity) {
		dragTerget.cloneEle.setAttribute('style', `left: ${x}px;top: ${y}px;opacity:${opacity == undefined ? 1 : opacity};`);
	}

	//mousemove 鼠标 移动 事件
	function settleMouseMove(event) {
		dragTerget.moveX = event.pageX;
		dragTerget.moveY = event.pageY;

		let setX = dragTerget.moveX - dragTerget.offsetX;
		let setY = dragTerget.moveY - dragTerget.offsetY;

		//超出範圍外
		// function outRange(){}

		//超出 上下左右 dragTerget.range 範圍
		if (
			dragTerget.mouseX - dragTerget.range > setX ||
			setX > dragTerget.mouseX + dragTerget.range ||
			dragTerget.mouseY - dragTerget.range > setY ||
			setY > dragTerget.mouseY + dragTerget.range
		) {
			setElePosition(setX, setY, parseFloat(1 - dragTerget.opacity));
		} else {
			setElePosition(setX, setY, dragTerget.opacity);
		}
	}

	//mousemove 鼠标 离开
	function mouseUpHandle() {
		window.removeEventListener('mousemove', settleMouseMove);
		window.removeEventListener('mouseup', mouseUpHandle);
		DropCloneDragEle();
	}

	CloneDragEle();
	window.addEventListener('mousemove', settleMouseMove);
	window.addEventListener('mouseup', mouseUpHandle);
	// console.log(event);
}
</script>

<style scoped lang="scss">
#search_icon {
	cursor: pointer;
}
#search_icon_cl {
	cursor: pointer;
	position: absolute;
	pointer-events: none;
	z-index: 99;
}
</style>
